<template>
  <div class="mainContainer">
<!--    <div class="titleContainer">-->
<!--      <div class="head_left">-->
<!--        <div class="setting_box" @click="showSettingPanel = !showSettingPanel"></div>-->
<!--        <div class="back_box"></div>-->
<!--        <div class="monitor_nav" v-if="!onlyTools">-->
<!--          <div class="tool_item" @mouseenter="monitorNavShow=true" @mouseleave="monitorNavShow=false">-->
<!--            <div class="tool_name boxSize flex">-->
<!--              <span class="label">{{ monitorObj[monitorActiveName] }}</span>-->
<!--              <span class="tool_arr"></span>-->
<!--            </div>-->
<!--            <div v-show="monitorNavShow" class="tool_options">-->
<!--              <div-->
<!--                  v-for="(item, index) in monitorOptions"-->
<!--                  :key="index"-->
<!--                  @click="monitorActiveChange(item)"-->
<!--                  :class="monitorActiveName === item.value ? 'active title boxSize' : 'title boxSize'"-->
<!--              >-->
<!--                {{ item.label }}-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="head_right">-->
<!--        <div class="item" style="margin-right: 10px;">2020年08月21日</div>-->
<!--        <div class="item" style="margin-right: 10px;">星期四</div>-->
<!--        <div class="item" style="margin-right: 20px;">08：02：32</div>-->
<!--        <div class="item">天气：</div>-->
<!--        &lt;!&ndash;       天气图标缺失         &ndash;&gt;-->
<!--        &lt;!&ndash;                <div class="item"><span class="icon"></span></div>&ndash;&gt;-->
<!--        <div class="item" style="margin-right: 20px;">晴</div>-->
<!--        <div class="item">气温：25°~15°</div>-->
<!--      </div>-->

<!--      <div class="setting-tools" v-show="showSettingPanel">-->
<!--        <div class="tool_options tp1">-->
<!--          <div-->
<!--              v-for="(item, index) in toolOptions"-->
<!--              :key="index"-->
<!--              @click.stop="toolOptionsClick(item)"-->
<!--              :class="toolActive === item.value ? 'active title boxSize flex' : 'title boxSize flex'"-->
<!--          >-->
<!--            <div class="tool_icon"><img :src="item.icon_1" alt=""></div>-->
<!--            <div class="txt">{{ item.label }}</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="tool_options tp4" v-show="toolActive==1">-->
<!--          <div-->
<!--              v-for="(item, index) in toolOptions4"-->
<!--              :key="index"-->
<!--              @click.stop="toolOptionsClick4(item)"-->
<!--              :class="toolActive4 === item.value ? 'active title boxSize flex' : 'title boxSize flex'"-->
<!--          >-->
<!--            <div class="txt">{{ item.label }}</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="tool_options tp5" v-show="toolActive==2">-->
<!--          <div-->
<!--              v-for="(item, index) in toolOptions5"-->
<!--              :key="index"-->
<!--              @click.stop="toolOptionsClick5(item)"-->
<!--              :class="toolActive5 === item.value ? 'active title boxSize flex' : 'title boxSize flex'"-->
<!--          >-->
<!--            <div class="tool_icon"><img :src="item.icon_1" alt=""></div>-->
<!--            <div class="txt">{{ item.label }}</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="tool_options tp6" v-show="toolActive==3">-->
<!--          <div-->
<!--              v-for="(item, index) in toolOptions6"-->
<!--              :key="index"-->
<!--              @click.stop="toolOptionsClick6(item)"-->
<!--              :class="toolActive6 === item.value ? 'active title boxSize flex' : 'title boxSize flex'"-->
<!--          >-->
<!--            <div class="tool_icon"><img :src="item.icon_1" alt=""></div>-->
<!--            <div class="txt">{{ item.label }}</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="tool_options tp7" v-show="toolActive==3&&toolActive6==2">-->
<!--          <div-->
<!--              v-for="(item, index) in toolOptions7"-->
<!--              :key="index"-->
<!--              @click.stop="toolOptionsClick7(item)"-->
<!--              :class="toolActive7 === item.value ? 'active title boxSize flex' : 'title boxSize flex'"-->
<!--          >-->
<!--            <div class="tool_icon"><img :src="item.icon_1" alt=""></div>-->
<!--            <div class="txt">{{ item.label }}</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="tool_options tp8" v-show="toolActive==3&&toolActive6==3">-->
<!--          <div-->
<!--              v-for="(item, index) in toolOptions8"-->
<!--              :key="index"-->
<!--              @click.stop="toolOptionsClick8(item)"-->
<!--              :class="toolActive8 === item.value ? 'active title boxSize flex' : 'title boxSize flex'"-->
<!--          >-->
<!--            <div class="tool_icon"><img :src="item.icon_1" alt=""></div>-->
<!--            <div class="txt">{{ item.label }}</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="tool_options tp9" v-show="toolActive==1">-->
<!--          <div class="boxSize flex title boldT">-->
<!--            <div class="txt">添加</div>-->
<!--            <div class="tool_icon"><img src="@/assets/tj.png" alt=""></div>-->
<!--          </div>-->
<!--          <div-->
<!--              v-for="(item, index) in toolOptions9"-->
<!--              :key="index"-->
<!--              @click.stop="toolOptionsClick9(item)"-->
<!--              :class="toolActive9 === item.value ? 'active title boxSize flex' : 'title boxSize flex'"-->
<!--          >-->
<!--            <div class="txt">{{ item.label }}</div>-->
<!--            <div class="tool_icon ml5" @click="delDialog=true"><img :src="item.icon_1" alt=""></div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="tool_options tp10" v-show="toolActive==2&&toolActive5==2">-->
<!--          <div-->
<!--              v-for="(item, index) in toolOptions10"-->
<!--              :key="index"-->
<!--              @click.stop="toolOptionsClick10(item)"-->
<!--              :class="(toolActive10 === item.value ? 'active title boxSize flex fitem' : 'title boxSize flex fitem')"-->
<!--          >-->
<!--            <div class="title-line">-->
<!--              <div class='txt'>{{ item.label }}</div>-->
<!--              <div class="tool_icon ml5" @click="item.exp=!item.exp"><img-->
<!--                  src="@/assets/xl.png" alt=""></div>-->
<!--            </div>-->
<!--            <div v-if="item.exp&&item.child.length&&toolActive10 === item.value">-->
<!--              <div-->
<!--                  v-for="(item, index) in item.child"-->
<!--                  :key="index"-->
<!--                  @click.stop="toolChildActive10=item.value"-->
<!--                  :class="(toolChildActive10 === item.value ? 'active title boxSize flex' : 'title boxSize flex')"-->
<!--              >-->
<!--                <div class='txt'>{{ item.label }}</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="del-box" v-show="delDialog">-->
<!--          <div class="tt">删除确认</div>-->
<!--          <div class="bb">-->
<!--            <span @click="delDialog=false">取消</span>-->
<!--            <span>|</span>-->
<!--            <span @click="delDialog=false">确认</span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

<!--      &lt;!&ndash;            <el-select @change="monitorActiveChange" v-model="monitorActiveName" placeholder="">-->
<!--                      <el-option-->
<!--                          v-for="item in monitorOptions"-->
<!--                          :key="item.value"-->
<!--                          :label="item.label"-->
<!--                          :value="item.value">-->
<!--                      </el-option>-->
<!--                  </el-select>&ndash;&gt;-->
<!--    </div>-->
<!--    <div v-if="!onlyTools">-->
    <div>
      <router-view/>
    </div>

  </div>
</template>

<script>


export default {
  name: "monitorIndex",
  props: {
    onlyTools: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      delDialog: false,
      showSettingPanel: false,
      toolActive: 1,
      toolOptions: [
        {value: 1, label: '漫游管理', icon_1: require('@/assets/jk.png')},
        {value: 2, label: '模型管理', icon_1: require('@/assets/sxt.png')},
        {value: 3, label: '专题图生成', icon_1: require('@/assets/tp.png')},
      ],
      toolActive4: 1,
      toolOptions4: [
        {value: 1, label: 'XX公司1', icon_1: require('@/assets/jk.png')},
        {value: 2, label: 'XX公司2', icon_1: require('@/assets/sxt.png')},
        {value: 3, label: 'XX公司3', icon_1: require('@/assets/tp.png')},
        {value: 4, label: 'XX公司4', icon_1: require('@/assets/tp.png')},
        {value: 5, label: 'XX公司5', icon_1: require('@/assets/tp.png')},
        {value: 6, label: 'XX公司6', icon_1: require('@/assets/tp.png')},
      ],
      toolActive5: 1,
      toolOptions5: [
        {value: 1, label: '系统模型管理', icon_1: require('@/assets/jk.png')},
        {value: 2, label: '导入模型管理', icon_1: require('@/assets/sxt.png')},
      ],
      toolActive6: 1,
      toolOptions6: [
        {value: 1, label: '企业分布', icon_1: require('@/assets/zfx.png')},
        {value: 2, label: '传感器分布', icon_1: require('@/assets/zfx.png')},
        {value: 3, label: '监控分布', icon_1: require('@/assets/zfx.png')},
      ],
      toolActive7: 1,
      toolOptions7: [
        {value: 1, label: '气体', icon_1: require('@/assets/zfx.png')},
        {value: 2, label: '温度', icon_1: require('@/assets/zfx.png')},
        {value: 3, label: '湿度', icon_1: require('@/assets/zfx.png')},
        {value: 4, label: '烟雾', icon_1: require('@/assets/zfx.png')},
        {value: 5, label: '用电', icon_1: require('@/assets/zfx.png')},
        {value: 6, label: '压力', icon_1: require('@/assets/zfx.png')},
      ],
      toolActive8: 1,
      toolOptions8: [
        {value: 1, label: '高清监控', icon_1: require('@/assets/zfx.png')},
        {value: 2, label: '高点监控', icon_1: require('@/assets/zfx.png')},
        {value: 3, label: '鹰眼监控', icon_1: require('@/assets/zfx.png')},
        {value: 4, label: '卡口监控', icon_1: require('@/assets/zfx.png')},
        {value: 5, label: '排污监控', icon_1: require('@/assets/zfx.png')},
      ],
      toolActive9: 1,
      toolOptions9: [
        {value: 1, label: '漫游路线1', icon_1: require('@/assets/sc.png')},
        {value: 2, label: '漫游路线2', icon_1: require('@/assets/sc.png')},
      ],
      toolActive10: 1,
      toolChildActive10: 1,
      toolOptions10: [
        {
          value: 1, label: '模型分类', icon_1: require('@/assets/xl.png'), exp: true, child: [
            {value: 1, label: '模型分类1', parent: 1, icon_1: require('@/assets/xl.png')},
            {value: 2, label: '模型分类1', parent: 1, icon_1: require('@/assets/xl.png')},]
        },
        {value: 4, exp: false, child: [
            {value: 1, label: '模型分类2', parent: 1, icon_1: require('@/assets/xl.png')},
            {value: 2, label: '模型分类2', parent: 1, icon_1: require('@/assets/xl.png')},
            {value: 3, label: '模型分类2', parent: 1, icon_1: require('@/assets/xl.png')},
            {value: 4, label: '模型分类2', parent: 1, icon_1: require('@/assets/xl.png')},], label: '模型分类2', icon_1: require('@/assets/xl.png')},
        {value: 5, exp: false, child: [
            {value: 1, label: '模型分类3', parent: 1, icon_1: require('@/assets/xl.png')},
            {value: 2, label: '模型分类3', parent: 1, icon_1: require('@/assets/xl.png')},
            {value: 3, label: '模型分类3', parent: 1, icon_1: require('@/assets/xl.png')},], label: '排污监控模型分类3', icon_1: require('@/assets/xl.png')},
      ],

      monitorNavShow: false,
      monitorActiveName: 'monitorAir',
      monitorOptions: [
        {value: 'monitorAir', label: '大气监测'},
        {value: 'monitorContaminated', label: '污染源监测'},
        {value: 'monitorEnvironment', label: '环境监测'},
      ],
      monitorObj: {
        monitorAir: '大气监测',
        monitorContaminated: '污染源监测',
        monitorEnvironment: '环境监测',
      }
    }
  },
  components: {},
  mounted() {
    // window.addEventListener("load", () => {
    //   window.loads() //webrtc
    // })
  },
  watch: {},
  methods: {
    toolOptionsClick(obj) {
      if (this.toolActive !== obj.value) {
        this.toolActive = obj.value
      }
    },
    toolOptionsClick2(obj) {
      if (this.toolActive2 !== obj.value) {
        this.toolActive2 = obj.value
      }
    },
    toolOptionsClick3(obj) {
      if (this.toolActive3 !== obj.value) {
        this.toolActive3 = obj.value
      }
    },
    toolOptionsClick4(obj) {
      if (this.toolActive4 !== obj.value) {
        this.toolActive4 = obj.value
      }
    },
    toolOptionsClick5(obj) {
      if (this.toolActive5 !== obj.value) {
        this.toolActive5 = obj.value
      }
    },
    toolOptionsClick6(obj) {
      if (this.toolActive6 !== obj.value) {
        this.toolActive6 = obj.value
      }
    },
    toolOptionsClick7(obj) {
      if (this.toolActive7 !== obj.value) {
        this.toolActive7 = obj.value
      }
    },
    toolOptionsClick8(obj) {
      if (this.toolActive8 !== obj.value) {
        this.toolActive8 = obj.value
      }
    },
    toolOptionsClick9(obj) {
      if (this.toolActive9 !== obj.value) {
        this.toolActive9 = obj.value
      }
    },
    toolOptionsClick10(obj) {
      if (this.toolActive10 !== obj.value) {
        this.toolActive10 = obj.value
      }
    },
    /**
     * 页面切换事件
     * */
    monitorActiveChange(obj) {
      this.monitorActiveName = obj.value;
      this.$router.push({name: this.monitorActiveName})
    }
  }
}
</script>

<style lang="scss" scoped>
.nnone {
  display: none;
  margin: 0 !important;
  padding: 0 !important;
}

.fitem {
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-end;
  text-align: left;
}

.title-line {
  display: flex;
  flex-direction: row;
}

.setting-tools {
  position: absolute;
  top: 82px;
  left: 137px;
  height: 390px;
  width: 530px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxSize {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.tool_options {
  background-color: rgba(8, 32, 72, .7);
  width: 120px;
  z-index: 996;

  .title {
    padding: 6px 0 6px 15px;
    font-size: 8px;
    color: #DDF8FF;
    justify-content: start;

    .tool_icon {
      width: 10px;
      height: 10px;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .txt {
      margin: 0 6px;
    }
  }

  .title:hover {
    cursor: pointer;
  }

  .title.active {
    color: #00E6FF;
  }
}

.tp1 {
  position: absolute;
  top: 0;
  z-index: 997;
}

.tp4 {
  position: absolute;
  top: 0;
  left: 140px;
}

.tp5 {
  position: absolute;
  top: 0px;
  left: 140px;
}

.tp6 {
  position: absolute;
  left: 140px;
  top: 0px;
}

.tp7 {
  position: absolute;
  left: 270px;
  top: 0;
}

.tp8 {
  position: absolute;
  left: 270px;
  top: 0;
}

.tp9 {
  position: absolute;
  left: 275px;
  top: 0;
}

.ml5 {
  margin-left: 5px;
}

.boldT:hover {
  cursor: default !important;
}

.boldT {
  color: #2f8ee0;

  .tool_icon {
    width: 15px !important;
    height: 15px !important;

  }

}

.tp10 {
  position: absolute;
  width: 150px;
  left: 275px;
  top: 0;
  padding: 5px 0;

  .tool_icon {
    width: 13px !important;
    height: 13px !important;
  }

}

.child-txt {
  scale: .8;
}

.del-box {
  position: absolute;
  top: 0;
  left: 420px;
  width: 110px;
  background-color: rgba(8, 32, 72, .7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  z-index: 998;

  .tt {
    font-size: 10px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #D8E8EC;
    line-height: 21px;
  }

  .bb {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    span {
      font-size: 10px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #2F8EE0;
      line-height: 21px;
    }

    span:first-child:hover {
      cursor: pointer;
    }

    span:last-child:hover {
      cursor: pointer;
    }

  }

}

.mainContainer {
  color: #ffffff;


}
@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return calc($width_2k*$pixel/$width);
  }
  @function calHeight_2k($pixel) {
    @return calc($pixel/1.8*2.7);
  }
  @function calFont_2k($pixel) {
    @return calc($height_2k*$pixel/$height);
  }
  .nnone {
  }

  .fitem {
  }

  .title-line {
  }

  .setting-tools {
    top: calHeight_2k(82px);
    height: calHeight_2k(390px);
  }

  .flex {
  }

  .tool_options {

    .title {
      padding-top: calHeight_2k(6px);
      padding-bottom: calHeight_2k(6px);

      .tool_icon {
        height: calHeight_2k(10px);

        img {
        }
      }

      .txt {
      }
    }

    .title:hover {
    }

    .title.active {
    }
  }

  .boxSize {
  }

  .tp1 {
  }

  .tp4 {
  }

  .tp5 {
  }

  .tp6 {
  }

  .tp7 {
  }

  .tp8 {
  }

  .tp9 {
  }

  .ml5 {
  }

  .boldT:hover {
  }

  .boldT {

    .tool_icon {
      height: calHeight_2k(15px) !important;

    }

  }

  .tp10 {
    padding-top: calHeight_2k(5px);
    padding-bottom: calHeight_2k(5px);

    .tool_icon {
      height: calHeight_2k(13px) !important;
    }

  }

  .child-txt {
  }

  .del-box {
    padding-top: calHeight_2k(10px);
    padding-bottom: calHeight_2k(10px);

    .tt {
      line-height: calHeight_2k(21px);
    }

    .bb {

      span {
        line-height: calHeight_2k(21px);
      }

      span:first-child:hover {
      }

      span:last-child:hover {
      }

    }

  }

  .mainContainer {


  }
}

</style>
